<template>
	<view>
		<view class="container p-bottom" v-if="order.order_id">

			<scroll-view scroll-y="true">

				<!-- 顶部状态栏 -->
				<view class="detail-header dis-flex flex-y-center" style="z-index: 999;">
					<view class="header-backdrop">
						<image src="/static/img/refund-bg.png"></image>
					</view>
					<view class="header-state f-32 col-f">
						<text>{{order.state_text}}</text>
					</view>
				</view>

				<!-- 快递配送：配送地址 -->
				<view v-if=" order.delivery_type.value == DeliveryTypeEnum.EXPRESS.value " class="flow-delivery">
					<view class="flow-delivery__detail dis-flex flex-y-center">
						<view class="detail-location dis-flex">
							<text class="iconfont icon-dingwei"></text>
						</view>
						<view class="detail-content flex-box">
							<view class="detail-content__title dis-flex">
								<text class="f-30">{{ order.address.name }}</text>
								<text class="detail-content__title-phone f-28">{{ order.address.phone }}</text>
							</view>
							<view class="detail-content__describe">
								<text class="col-7">{{order.address.region.province}} {{order.address.region.city}}
									{{order.address.region.region}} {{order.address.detail}}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 上门自提：自提门店 -->
				<view v-if=" order.delivery_type.value == DeliveryTypeEnum.EXTRACT.value " class="m-top20 b-f">
					<view class="flow-delivery">
						<view class="flow-delivery__title m-top20">
							<text class="flow-delivery__title-text f-30">自提门店</text>
							<text class="f-24 col-8">您须到该自提点取货</text>
						</view>
						<view class="flow-delivery__detail dis-flex flex-y-center" @tap="onTargetShop" :data-id=" order.extract_shop.shop_id ">
							<view class="detail-location dis-flex">
								<text class="iconfont icon-dingwei"></text>
							</view>
							<view class="detail-content flex-box">
								<view class="detail-content__title dis-flex">
									<text class="f-30">{{ order.extract_shop.shop_name }}</text>
								</view>
								<view class="detail-content__describe">
									<text class="col-7">{{order.extract_shop.region.province}} {{order.extract_shop.region.city}}
										{{order.extract_shop.region.region}} {{order.extract_shop.address}}</text>
								</view>
							</view>
							<view class="detail-arrow dis-flex">
								<text class="iconfont icon-xiangyoujiantou user-orderJtou"></text>
							</view>
						</view>
					</view>
				</view>

				<!-- 物流信息 -->
				<view class="flow-all-money b-f padding-box m-top20" v-if=" order.delivery_type.value == DeliveryTypeEnum.EXPRESS.value && order.delivery_status.value == 20 ">
					<view class="flow-all-list dis-flex">
						<text class="">物流信息</text>
					</view>
					<navigator class="dis-flex" hover-class="none" :url="'../express/express?order_id='+order.order_id">
						<view class="flex-box">
							<view class="dis-flex flow-all-list-cont">
								<text class="col-7">物流公司：{{order.express.express_name}}</text>
							</view>
							<view class="dis-flex flow-all-list-cont">
								<text class="col-7" selectable="true">物流单号：{{order.express_no}}</text>
							</view>
						</view>
						<view class="flow-arrow dis-flex">
							<text class="iconfont icon-xiangyoujiantou user-orderJtou"></text>
						</view>
					</navigator>
				</view>

				<!-- 标题：商品列表 -->
				<view class="flow-all-money b-f padding-box m-top20">
					<view class="flow-all-list dis-flex">
						<text class="">商品列表</text>
					</view>
					<view class="order-cont dis-flex">
						<view class="order-num">
							<text selectable="true">订单号：{{order.order_no}}</text>
						</view>
						<view class="order-time">
							<text>{{order.create_time}}</text>
						</view>
					</view>
				</view>

				<!-- 商品详情 -->
				<view class="checkout_list padding-box b-f">
					<view @tap="onTargetGoods" class="dis-flex flow-shopList b-f" :data-id="item.goods_id" v-for="(item,index) in order.goods"
					 :key="index">
						<view class="flow-list-left">
							<image mode="scaleToFill" :src="item.image.file_path"></image>
						</view>
						<view class="flow-list-right flex-box">
							<!-- 商品名称 -->
							<text class="f-30 col-3 twolist-hidden">{{item.goods_name}}</text>
							<!-- 商品sku信息 -->
							<text class="f-24 col-7">{{item.goods_attr}}</text>
							<!-- 商品数量和单价 -->
							<view class="flow-list-cont dis-flex flex-x-between flex-y-center">
								<text class="small">×{{item.total_num}}</text>
								<text class="flow-cont" :class="item.is_user_grade ? 'price-delete' : ''">￥{{item.goods_price}}</text>
							</view>
							<!-- 会员折扣价 -->
							<view v-if=" item.is_user_grade " class="grade-price">
								<text>会员折扣价：￥{{ item.grade_goods_price }}</text>
							</view>
							<!-- 申请售后 -->
							<view class="m-top20 flex-x-end">
								<text v-if=" item.refund " class="f-26 col-7">已申请售后</text>
								<view v-else-if=" order.isAllowRefund " class="btn-default" @tap="onApplyRefund" :data-id="item.order_goods_id">申请售后</view>
							</view>
						</view>
					</view>
				</view>

				<view class="flow-num-box b-f">
					<text>共{{order.goods.length}}件商品，合计: </text>
					<text class="flow-money col-m">￥{{order.total_price}}</text>
				</view>

				<!-- 买家留言 -->
				<view class="flow-all-money b-f m-top20" v-if=" order.buyer_remark.length ">
					<view class="dis-flex flow-all-list">
						<text class="flex-five">买家留言</text>
					</view>
					<view class="dis-flex flow-all-list-cont" style="padding: 15upx 0;">
						<text class="col-7">{{ order.buyer_remark }}</text>
					</view>
				</view>

				<!-- 订单金额 -->
				<view class="flow-all-money b-f padding-box m-top20">
					<view class="dis-flex flow-all-list">
						<text class="flex-five">订单金额</text>
					</view>
					<view class="dis-flex flow-all-list-cont">
						<text class="flex-five col-7">商品金额：</text>
						<text class="flex-five col-m t-r">￥{{order.total_price}}</text>
					</view>
					<view v-if=" order.coupon_id > 0 " class="dis-flex flow-all-list-cont">
						<text class="flex-five col-7">优惠券抵扣：</text>
						<text class="flex-five col-m t-r">-￥{{order.coupon_money}}</text>
					</view>
					<view v-if=" order.points_num > 0 " class="dis-flex flow-all-list-cont">
						<text class="flex-five col-7">{{ setting.points_name }}抵扣：</text>
						<text class="flex-five col-m t-r">-￥{{order.points_money}}</text>
					</view>
					<view class="dis-flex flow-all-list-cont">
						<text class="flex-five col-7">配送费用：</text>
						<text class="flex-five col-m t-r">+￥{{order.express_price}}</text>
					</view>
					<view class="dis-flex flow-all-list-cont" v-if=" order.update_price.value != '0.00' ">
						<text class="flex-five col-7">后台改价：</text>
						<text class="flex-five col-m t-r">{{order.update_price.symbol}}￥{{order.update_price.value}}</text>
					</view>
					<view class="dis-flex flow-all-list-cont">
						<text class="flex-five col-7">实付金额：</text>
						<text class="flex-five col-m t-r">￥{{order.pay_price}}</text>
					</view>
				</view>

			</scroll-view>

			<!-- 操作栏 -->
			<view v-if=" order.order_status.value != 20 " class="flow-fixed-footer b-f">
				<view class="dis-flex chackout-box" v-if="order.pay_status.value==10">
					<!-- 取消订单 -->
					<view @tap="cancelOrder" class="flex-box chackout-left-detail t-c">
						取消订单
					</view>
					<!-- 订单付款 -->
					<view class="flex-box chackout-right-detail">
						<text @tap="onPayOrder" class="flow-btn" v-if="order.pay_status.value==10">去付款</text>
					</view>
				</view>
				<!-- 确认收货 -->
				<view class="flow-btn h3" v-if="order.delivery_status.value==20 && order.receipt_status.value==10">
					<view @tap="receipt">确认收货</view>
				</view>
			</view>


		<!-- 支付方式弹窗 -->
		<zan-popup  v-if="showPayPopup" :class="[showPayPopup ? 'pop--show' : '']" @tap="onClosePayPopup">
			<view class="pop__mask "></view>
			<view class="pop__container">
				<view class="pop-orderPay pop-example__container">
					<view class="pop-title">
						<text class="f-30">请选择支付方式</text>
					</view>
					<view class="pop-content">
						<view class="pay-method">
							<form @submit="onSelectPayType" :data-value="PayTypeEnum.WECHAT.value" report-submit="true">
								<button form-type="submit" class="btn-normal">
									<view class="pay-item dis-flex flex-x-between">
										<view class="item-left dis-flex flex-y-center">
											<view class="item-left_icon wechat">
												<text class="iconfont icon-weixinzhifu"></text>
											</view>
											<view class="item-left_text">
												<text>{{ PayTypeEnum.WECHAT.name }}</text>
											</view>
										</view>
									</view>
								</button>
							</form>
							<form @submit="onSelectPayType" :data-value="PayTypeEnum.BALANCE.value" report-submit="true">
								<button form-type="submit" class="btn-normal">
									<view class="pay-item dis-flex flex-x-between">
										<view class="item-left dis-flex flex-y-center">
											<view class="item-left_icon balance">
												<text class="iconfont icon-qiandai"></text>
											</view>
											<view class="item-left_text">
												<text>{{ PayTypeEnum.BALANCE.name }}</text>
											</view>
										</view>
									</view>
								</button>
							</form>
						</view>
					</view>
				</view>
			</view>
		</zan-popup>

			<!-- 快捷导航 -->
			<shortcut bottom="100upx"></shortcut>

		</view>
	</view>
</template>

<script>
	// 枚举类：发货方式
	import DeliveryTypeEnum from '../../../../utils/enum/DeliveryType.js';
	// 枚举类：支付方式
	import PayTypeEnum from '../../../../utils/enum/order/PayType'

	import shortcut from '../../../../components/goods/shortcut.vue'
	
	import zanpopup from '../../../../components/popup/popup.vue'

	export default {
		components: {
			// （组件命名）
			shortcut,
			zanpopup
		},
		props: {
			shortcut: {},
		},
		data() {
			return {
				// 配送方式
				DeliveryTypeEnum,

				// 支付方式
				PayTypeEnum,

				order_id: '',
				order: {},
				address: '',
				showPayPopup: false,
			}
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			let _this = this;
			_this.order_id = options.order_id;
			// 获取订单详情
			_this.getOrderDetail(options.order_id);
		},
		methods: {
			/**
			 * 获取订单详情
			 */
			getOrderDetail(order_id) {
				let _this = this;
				_this._get('sharing.order/detail', {
					order_id
				}, result => {
					_this.setData(result.data);
				});
			},

			/**
			 * 跳转到商品详情
			 */
			onTargetGoods(e) {
				let goods_id = e.currentTarget.dataset.id;
				uni.navigateTo({
					url: '../../goods/index?goods_id=' + goods_id
				});
			},

			/**
			 * 取消订单
			 */
			cancelOrder(e) {
				let _this = this;
				let order_id = _this.order_id;
				uni.showModal({
					title: "提示",
					content: "确认取消订单？",
					success(o) {
						if (o.confirm) {
							_this._post_form('sharing.order/cancel', {
								order_id
							}, result => {
								uni.navigateBack();
							});
						}
					}
				});
			},

			/**
			 * 确认收货
			 */
			receipt(e) {
				let _this = this;
				let order_id = _this.order_id;
				uni.showModal({
					title: "提示",
					content: "确认收到商品？",
					success(o) {
						if (o.confirm) {
							_this._post_form('sharing.order/receipt', {
								order_id
							}, result => {
								_this.getOrderDetail(order_id);
							});
						}
					}
				});
			},

			/**
			 * 申请售后
			 */
			onApplyRefund(e) {
				uni.navigateTo({
					url: '../refund/apply/apply?order_goods_id=' + e.currentTarget.dataset.id,
				})
			},

			/**
			 * 跳转到门店详情
			 */
			onTargetShop(e) {
				uni.navigateTo({
					url: '../../../shop/detail/detail?shop_id=' + e.currentTarget.dataset.id,
				})
			},

			/**
			 * 点击付款按钮
			 */
			onPayOrder(e) {
				let _this = this;
				// 显示支付方式弹窗
				_this.onTogglePayPopup();
			},

			/**
			 * 选择支付方式
			 */
			onSelectPayType(e) {
				let _this = this;
				// 记录formId
				_this.saveFormId(e.detail.formId);
				// 隐藏支付方式弹窗
				_this.onClosePayPopup();
				if (!_this.showPayPopup) {
					// 发起付款请求
					_this.payment(e.currentTarget.dataset.value);
				}
			},

			/**
			 * 显示/隐藏支付方式弹窗
			 */
			onTogglePayPopup() {
				this.setData({
					showPayPopup: !this.showPayPopup
				});
			},

			/**
			 * 隐藏支付方式弹窗
			 */
			onClosePayPopup() {
				this.setData({
					showPayPopup: false
				});
			},
			
			/**
			 * 发起付款请求
			 */
			payment(payType) {
				let _this = this,
					orderId = _this.order_id;

				// 显示loading
				uni.showLoading({
					title: '正在处理...',
				});
				_this._post_form('sharing.order/pay', {
					order_id: orderId,
					payType
				}, result => {
					if (result.code === -10) {
						_this.showError(result.msg);
						return false;
					}

					// 发起微信支付
					if (result.data.pay_type == PayTypeEnum.WECHAT.value) {
						_this.wxPayment({
							payment: result.data.payment,
							success() {
								_this.getOrderDetail(orderId);
							},
							fail() {
								_this.showError(result.msg.success);
							},
						});
					}

					// 余额支付
					if (result.data.pay_type == PayTypeEnum.BALANCE.value) {
						_this.showSuccess(result.msg.success, () => {
							_this.getOrderDetail(orderId);
						});
					}

				}, null, () => {
					uni.hideLoading();
				});
			},
		}
	}
</script>

<style>
	.order-cont {
		/* padding: 12upx 0; */
		justify-content: space-between;
	}

	.order-cont .order-num text,
	.order-cont .time {
		color: #888;
	}

	.order-cont .order-num text,
	.order-cont .order-time text {
		color: #777;
		font-size: 26upx;
	}

	.chackout-right-detail,
	.chackout-left-detail {
		font-size: 30upx;
		color: #333;
		line-height: 92upx;
	}

	.btn-default {
		border-radius: 4px;
		border: 1upx solid #ccc;
		padding: 6upx 20upx;
		font-size: 28upx;
		color: #555;
	}

	/* 会员价 */

	.flow-shopList .flow-list-right .flow-cont.price-delete {
		font-size: 26upx;
		color: #777;
		text-decoration: line-through;
	}

	.flow-shopList .grade-price {
		padding-top: 8upx;
		font-size: 28upx;
		color: #ff495e;
		text-align: right;
	}

	/* 顶部状态栏 */

	.detail-header {
		position: relative;
		width: 100%;
		height: 140upx;
	}

	.detail-header .header-backdrop {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	.detail-header .header-backdrop image {
		display: block;
		width: 750upx;
		height: 140upx;
	}

	.header-state {
		padding: 0 50upx;
	}

	/* 配送信息 */

	.flow-delivery {
		background: #fff url('') bottom left repeat-x;
		background-size: 120upx auto;
	}

	.flow-delivery__title {
		width: 702upx;
		padding: 15upx 0;
		margin: 0 auto;
		background: #fff;
		border-bottom: 1upx solid #f1f1f1;
	}

	.flow-delivery__title-text {
		margin-right: 20upx;
	}

	.flow-delivery__detail {
		padding: 30upx;
	}

	.detail-content {
		padding: 0 20upx;
	}

	.detail-content__title {
		margin-bottom: 6upx;
	}

	.detail-content .detail-content__title-phone {
		margin-left: 10upx;
	}

	.detail-content .detail-content__describe {
		font-size: 28upx;
	}

	/* 弹出层 */

	.pop-example__container {
		background: #fff;
		padding: 30upx 40upx;
		border-radius: 10upx;
		min-width: 460upx;
	}

	.pop-example__container .pop-title {
		text-align: center;
	}

	.pop-content {
		margin-top: 30upx;
	}

	/* 弹出层：支付方式 */

	.pop-orderPay .pop-title {
		text-align: left;
	}

	.pay-method .pay-item {
		padding: 20upx 0;
		font-size: 28upx;
		/* border-bottom: 1upx solid rgb(248, 248, 248); */
	}

	.pay-method .pay-item .item-left_icon {
		margin-right: 20upx;
		font-size: 32upx;
	}

	.pay-method .pay-item .item-left_icon.wechat {
		color: #00c800;
	}

	.pay-method .pay-item .item-left_icon.balance {
		color: #ff9700;
	}

	.popup__trade {
		width: 750upx;
		position: relative;
		padding-bottom: 92upx;
		z-index: 999;
	}

	.popup__trade .trade-close {
		position: absolute;
		top: 20upx;
		right: 20upx;
		width: 50upx;
		height: 50upx;
	}

	.popup__trade .trade-main {
		background: #fff;
		box-sizing: border-box;
		padding: 24upx;
	}

	.popup__trade .footer-fixed {
		position: absolute;
	}

	.popup__trade .trade-main .goods-info {
		margin-bottom: 10upx;
	}

	.popup__trade .trade-main .goods-info .goods-image {
		margin-top: -40px;
		margin-right: 20upx;
	}

	.popup__trade .trade-main .goods-info .goods-image image {
		width: 90px;
		height: 90px;
		border: 5upx solid #fff;
		box-shadow: 0 4upx 10upx rgba(220, 220, 220, 0.79);
	}

	.popup__trade .trade-main .goods-info .money-box {
		margin: 0;
	}

	.popup__trade .trade-main .goods-info .goods-stock {
		padding-left: 10upx;
	}

	.popup__trade .trade-main .buy_number {
		margin: 20upx 0;
		justify-content: space-between;
	}

	.popup__trade .trade-main .buy_number .buyNumber {
		color: #888;
		background: #fff;
		border-radius: 10upx;
		margin-bottom: 10upx;
	}
	
	
	.pop--show {
		visibility: visible
	}
		
	.pop__mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 14;
		background: rgba(0, 0, 0, .5);
		display: none
	}
		
	.pop__mask--hide {
		background: 0 0
	}
		
	.pop__container {
		position: fixed;
		left: 50%;
		top: 50%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transition: all .2s ease;
		transition: all .2s ease;
		z-index: 15;
		opacity: 0
	}
		
	.pop--show .pop__container {
		opacity: 1
	}
		
	.pop--show .pop__mask {
		display: block
	}
		
	.pop--left .pop__container {
		left: 0;
		top: 50%;
		-webkit-transform: translate3d(-100%, -50%, 0);
		transform: translate3d(-100%, -50%, 0)
	}
		
	.pop--show.pop--left .pop__container {
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0)
	}
		
	.pop--right .pop__container {
		right: 0;
		top: 50%;
		left: auto;
		-webkit-transform: translate3d(100%, -50%, 0);
		transform: translate3d(100%, -50%, 0)
	}
		
	.pop--show.pop--right .pop__container {
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0)
	}
		
	.pop--bottom .pop__container {
		top: auto;
		left: 50%;
		bottom: 0;
		-webkit-transform: translate3d(-50%, 100%, 0);
		transform: translate3d(-50%, 100%, 0)
	}
		
	.pop--show.pop--bottom .pop__container {
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0)
	}
		
	.pop--top .pop__container {
		top: 0;
		left: 50%;
		-webkit-transform: translate3d(-50%, -100%, 0);
		transform: translate3d(-50%, -100%, 0)
	}
		
	.pop--show.pop--top .pop__container {
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0)
	}
</style>
